<template>
  <!-- // 应急抢修任务 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">应急任务</div>
      <!-- 切换任务类型  需求 -->
      <div class="list-box__right">
        <el-button plain @click="open1('1')" :class="taskTypeName === '1' ? 'default' : ''">抢修任务</el-button>
        <el-button plain @click="open1('2')" :class="taskTypeName === '2' ? 'default' : ''">勘察任务</el-button>
      </div>
    </div>
    <div v-if="taskTypeName === '1'" style="height:70%;">
      <div class="mainBottom" style="height:100%;position: relative;">
        <div id="RightLine" style="width:33.3333%;height:100%">
          <!-- <Pie3dCharts :optionData="optionData[0]" :totalData="{ text: '总数', num: 25 }" charId="yjtzdcharId14" :pieOptions="{ innerSize: 100, subtitleY: 120, depth: 60 }"></Pie3dCharts> -->
        </div>
        <div id="RightLine1" style="width:33.3333%;height:100%">
          <!-- <Pie3dCharts :optionData="optionData[1]" :totalData="{ text: '总数', num: 55 }" charId="yjtzdcharId11" :pieOptions="{ innerSize: 100, subtitleY: 120, depth: 60 }"></Pie3dCharts> -->
        </div>
        <div id="RightLine2" style="width:33.3333%;height:100%">
          <!-- <Pie3dCharts :optionData="optionData[2]" :totalData="{ text: '总数', num: 46 }" charId="yjtzdcharId12" :pieOptions="{ innerSize: 100, subtitleY: 120, depth: 60 }"></Pie3dCharts> -->
        </div>
        <div style="display: flex;position: absolute;left: 0;top: 10%;width: 100%;">
          <div class="smalltitle">输电</div>
          <div class="smalltitle">变电</div>
          <div class="smalltitle">配电</div>
        </div>
      </div>
      <div class="flex flexAround" style="width:50%;margin:auto">
        <div v-for="(item, index) in pieChartData" :key="index">
          <span class="pie_bottom" :style="{ backgroundColor: item.color, 'margin-right': '10px' }"></span>
          <span class="white fontSize12">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div v-else style="width: 100%;height:calc(100% - 40px);padding-top:10px; box-sizing: border-box;">
      <!-- <BarChartsNewVue :option="option1" chartId="yjzycl" barChartsId="yjzycl1" v-if="showBarCharts"></BarChartsNewVue> -->
      <BarCharts :option="option1" chartId="yjzykc" barChartsId="yjzykc1"></BarCharts>
    </div>
  </div>
</template>

<script>
// import Pie3dCharts from "@/components/highCharts/HighChartsPie3d";
// import BarChartsNewVue from "@/views/EmergencyResources/components/BarChartsNew.vue";
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import { getReconnaissanceResponseId } from "@/api/EmergencyDisposal/homepagecontent.js";
export default {
  name: "EmergencyRepair",
  components: { BarCharts },
  beforeDestroy() {
    this.$eventBus.$off("changeRepairData");
  },
  data() {
    return {
      data1: [],
      data2: [],
      data3: [],
      xAxisData: [],
      surveyId: "",
      taskTypeName: "1",
      activeName: "first",
      pieChartData: [{
        name: "未开工", y: 1, color: "#FFBC4B"
      }, {
        name: "已开工", y: 1, color: "#4FD2FD"
      }, {
        name: "已完工", y: 0, color: "#EEEA71"
      }],
      pieChartData1: [{
        name: "未开工", y: 1, color: "#FFBC4B"
      }, {
        name: "已开工", y: 3, color: "#4FD2FD"
      }, {
        name: "已完工", y: 1, color: "#EEEA71"
      }],
      pieChartData2: [{
        name: "未开工", y: 10, color: "#FFBC4B"
      }, {
        name: "已开工", y: 9, color: "#4FD2FD"
      }, {
        name: "已完工", y: 6, color: "#EEEA71"
      }],
      option1: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 80, // 左边距离
          right: 10, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["未开工", "已开工", "已完工"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(条)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      }
    };
  },
  mounted() {
    this.$eventBus.$on("changeRepairData", (index, id) => {
      this.surveyId = id;
      this.getTaskList();
    });
    this.initCharts(); // 初始化渲染echart图标

  },
  methods: {

    getTaskList() {
      this.xAxisData = [];
      this.option1.xAxis[0].data = [];
      this.option1.series = [];
      getReconnaissanceResponseId({ sourceInfoId: this.surveyId }).then(res => {
        this.xAxisData = res.map((item) => {
          return item.majorType;
        });
        if (res.length > 0) {
          this.data1 = res.map((item) => {
            return item.notInService ? item.notInService : 0;
          });
          this.data2 = res.map((item) => {
            return item.underway ? item.underway : 0;
          });
          this.data3 = res.map((item) => {
            return item.offTheStocks ? item.offTheStocks : 0;
          });
        }
        this.xAxisData = res.map(item => item.category);
        this.option1.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option1.series.push([el, this.data2[index], this.data3[index]]);
        });
      });

    },

    open1(val) {
      this.taskTypeName = val;
      this.$nextTick(() => {
        val === "1" && this.initCharts();
        val === "2" && this.getTaskList();
      });
    },
    getTotal(list) {
      let num = 0;
      list.forEach(el => {
        num += el.y;
      });
      return num;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initCharts() {
      //  获取数据
      this.$Highcharts.chart("RightLine", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          enabled: false
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 120,
          // y: 10,
          // layout: "horizontal",
          // align: "center",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 50,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "65%",
            startAngle: -30, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pieChartData
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 35px;font-weight:bold;color:#fff">${this.getTotal(this.pieChartData)}</span><br/><span style="font-size: 18px;color:#fff">计划任务</span>`,
          x: 0,
          y: 120
        },
        title: {
          text: "输电",
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#FFBC4B", "#4FD2FD", "#EEEA71"]
      });
      this.$Highcharts.chart("RightLine1", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          enabled: false
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 120,
          // y: 10,
          // layout: "horizontal",
          // align: "center",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "65%",
            startAngle: -30, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pieChartData1
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 35px;font-weight:bold;color:#fff">${this.getTotal(this.pieChartData1)}</span><br/><span style="font-size: 18px;color:#fff">计划任务</span>`,
          x: 0,
          y: 120
        },
        title: {
          text: "变电",
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#5EE855", "#EEEA71", "#4FD2FD"]
      });
      this.$Highcharts.chart("RightLine2", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}条</span></div>`;
          }
        },
        legend: {
          enabled: false
          // width: 450,
          // icon: "rect",
          // verticalAlign: "bottom",
          // symbolWidth: 12,
          // symbolHeight: 12,
          // symbolRadius: 4,
          // x: 120,
          // y: 10,
          // layout: "horizontal",
          // align: "center",
          // itemMarginTop: 3,
          // itemStyle: {
          //   fontSize: "12px",
          //   color: "#fff"
          // },
          // itemHoverStyle: {
          //   color: "#fff"
          // }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 40,
            size: 190,
            dataLabels: {
              crop: false,
              alignTo: "connectors",
              connectorWidth: 0,
              connectorShape: "crookedLine",
              overflow: "allow",
              distance: 0,
              enabled: false,
              style: {
                fontSize: "14px"
              },
              formatter() {
                return `<span style="color: ${this.point.color}">${this.point.name}</span><br/>${this.point.y}条`;
              }
            },
            showInLegend: true, // 显示图例
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            innerSize: "65%",
            startAngle: -30, // 起始角度
            states: {
              inactive: {
                enabled: true
              }
            },
            data: this.pieChartData2
          }
        ],
        subtitle: {
          floating: true,
          text: `<span style="font-size: 35px;font-weight:bold;color:#fff">${this.getTotal(this.pieChartData2)}</span><br/><span style="font-size: 18px;color:#fff">计划任务</span>`,
          x: 0,
          y: 120
        },
        title: {
          text: "配电",
          style: { "color": "#ffffff", "fontSize": "24px", "fontWeight": "bold" },
          y: 40
        },
        colors: ["#5EE855", "#EEEA71", "#4FD2FD"]
      });
    }
  }
};
// const option = {
//   legend: {
//     bottom: "15%",
//     left: "center",
//     itemGap: 100,
//     itemWidth: 15,
//     itemHeight: 15,
//     textStyle: {
//       color: "#fff"
//     }
//   },
//   tooltip: {
//     trigger: "item",
//     backgroundColor: "rgba(0,24,34,0.25)",
//     borderWidth: 0,
//     textStyle: {
//       color: "#fff"
//     }
//   },
//   series: [
//     {
//       type: "pie",
//       startAngle: 120, // 起始角度
//       label: {
//         show: false,
//         normal: {
//           formatter: "{total|10}" + "\n\r" + "{active|计划任务}",
//           position: "center",
//           color: "white",
//           rich: {
//             total: {
//               fontSize: 35,
//               fontWeight: "bold",
//               fontFamily: "PingFang SC",
//               color: "#fff"
//             },
//             active: {
//               fontFamily: "PingFang SC",
//               fontSize: 18,
//               color: "#fff",
//               lineHeight: 20
//             }
//           }
//         }
//       },
//       labelLine: {
//         show: false
//       },
//       radius: ["35%", "60%"],
//       center: ["17%", "40%"],
//       data: [
//         {
//           name: "未开工",
//           value: 5,
//           itemStyle: {
//             color: "#148AF3"
//           }
//         },
//         {
//           name: "已开工",
//           value: 3,
//           itemStyle: {
//             color: "#F59066"
//           }
//         },
//         {
//           name: "已完工",
//           value: 2,
//           itemStyle: {
//             color: "#FDDD67"
//           }
//         }
//       ]
//     },
//     {
//       type: "pie",
//       startAngle: 120, // 起始角度
//       label: {
//         show: false,
//         normal: {
//           formatter: "{total|10}" + "\n\r" + "{active|计划任务}",
//           position: "center",
//           color: "white",
//           rich: {
//             total: {
//               fontSize: 35,
//               fontWeight: "bold",
//               fontFamily: "PingFang SC",
//               color: "#fff"
//             },
//             active: {
//               fontFamily: "PingFang SC",
//               fontSize: 18,
//               color: "#fff",
//               lineHeight: 20
//             }
//           }
//         }
//       },
//       labelLine: {
//         show: false
//       },
//       radius: ["35%", "60%"],
//       center: ["50%", "40%"],
//       color: "#F59066",
//       data: [
//         {
//           name: "未开工",
//           value: 5,
//           itemStyle: {
//             color: "#148AF3"
//           }
//         },
//         {
//           name: "已开工",
//           value: 3,
//           itemStyle: {
//             color: "#F59066"
//           }
//         },
//         {
//           name: "已完工",
//           value: 2,
//           itemStyle: {
//             color: "#FDDD67"
//           }
//         }
//       ]
//     },
//     {
//       type: "pie",
//       startAngle: 120, // 起始角度
//       label: {
//         show: false,
//         normal: {
//           formatter: "{total|10}" + "\n\r" + "{active|计划任务}",
//           position: "center",
//           color: "white",
//           rich: {
//             total: {
//               fontSize: 35,
//               fontWeight: "bold",
//               fontFamily: "PingFang SC",
//               color: "#fff"
//             },
//             active: {
//               fontFamily: "PingFang SC",
//               fontSize: 18,
//               color: "#fff",
//               lineHeight: 20
//             }
//           }
//         }
//       },
//       labelLine: {
//         show: false
//       },
//       radius: ["35%", "60%"],
//       center: ["83.5%", "40%"],
//       color: "#FDDD67",
//       data: [
//         {
//           name: "未开工",
//           value: 5,
//           itemStyle: {
//             color: "#148AF3"
//           }
//         },
//         {
//           name: "已开工",
//           value: 3,
//           itemStyle: {
//             color: "#F59066"
//           }
//         },
//         {
//           name: "已完工",
//           value: 2,
//           itemStyle: {
//             color: "#FDDD67"
//           }
//         }
//       ]
//     }
//   ]
// };
// var myChart = this.$echarts.init(document.getElementById("RightLine")); // 图标初始化
// myChart.setOption(option); // 渲染页面
// // 随着屏幕大小调节图标
// window.addEventListener("resize", () => {
//   myChart.resize();
// });
//     }
//   }
// };
</script>

<style scoped lang="less">
.homePageCard {
  height: 100%;
}

.mainBottom {
  display: flex;

  .marginAuto {
    position: relative;
    top: 5%;
  }
}

.pie_bottom {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.select {
  margin-right: 50px;
}

.smalltitle {
  width: 33.33%;
  text-align: center;
  color: #fff;
  font-weight: 600;
}

:deep(.el-button) {
  background: transparent;
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 0px;
}

:deep(.el-button.is-plain:hover) {
  background: #409eff;
  border: 1px solid transparent;
  color: #fff;
}

:deep(.el-button.is-plain:focus) {
  background: #409eff;
  border: 1px solid transparent;
  color: #fff;
}

:deep(.el-button + .el-button) {
  margin-left: 0px;
  margin-right: 0px;
}

.default {
  background: #409eff;
  border: 1px solid transparent;
  color: #fff;
}

.canvas-page .topDiv {
  justify-content: space-around;
  margin-top: 10px;
}</style>
